<template>
	<view class="bg">
		<!-- #ifndef H5 -->
		<view class="" style="height: 40px"></view>
		<!-- #endif -->

		<view class="top">
			<view class="left n-flex-row">
				<view class="dot-view">
					<image src="../../static/image/enimg/drawing2.png" mode="" @click="
            daojushow = true;
          getCard();
          bf_anjianyin();
          "></image>
					<text class="dot-red" v-if="cardList.length > 0">{{ cardList.length }}</text>
				</view>
				<view class="dot-view">
					<image src="../../static/image/enimg/drawing3.png" mode="" @click="
            couponshow = !couponshow;
          lingquan();
          bf_anjianyin();
          "></image>
					<text class="dot-red" v-if="couponList.length > 0">{{ couponList.length }}</text>
				</view>
				<!-- <image src="../../static/image/wy.webp" mode=""></image> -->
			</view>
			<view class="right">
				<image src="../../static/image/enimg/drawing4.png" mode=""
					@click="$.to('/pages/my/agreement?type=play_agreement')"></image>

				<!-- #ifndef MP-WEIXIN -->
				<image src="https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/drawing5.png" @click="
            wxKefu();
          bf_anjianyin();
          " mode=""></image>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<button class="kefu" open-type="contact"></button>
				<!-- #endif -->
			</view>

			<view class="musicIcon" @click="playMusic()">
				<image :class="muteBgMusic ? 'music musicFlex stop' : 'music musicFlex'" :src="muteBgMusic
              ? 'https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/drawing136eef561718eee2a9.png'
              : 'https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/drawing6.png'
            " mode=""></image>
			</view>
		</view>

		<view v-for="(tong, index) in tongView" :key="index" :class="tong.level_name === '史诗'
              ? 'tong-view tong-view-ssbg'
              : 'tong-view tong-view-csbg'
            " @click="openTong(tong)">
			<view class="tong-view-text" @click="openTong(tong)">{{ tong.text }}</view>
			<image :src="tong.goods_image" class="tong-gd-img" mode="scaleToFill" @click="openTong(tong)"></image>

<!-- 			<view class="text-gd-img" v-if="tong.level_name === '史诗'" style="color: #ef2a2a">
				<image
					src="http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240109/43b9a16489a48d2e647d2272e01db860.png"
					mode="scaleToFill"></image>
			</view>
			<view class="text-gd-img" v-else style="color: #eb6c0a">
				<image
					src="http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240109/53f32f05e931318581bf08f075b12e29.png"
					mode="scaleToFill"></image>
			</view> -->
		</view>

		<!-- <audio src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3" :loop="true"></audio> -->

		<view class="lunbo">
			<view class="goods">
				<swiper circular style="height: 600rpx" :current="swiperCurrent" @change="changeIdx">
					<swiper-item class="lunboitem" v-for="(item, idx) in boxData" :key="idx">
						<image @click="
            lookbox(item);
          bf_anjianyin();
          " :src="item.box_info.image" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="qipao">
				<!-- #ifndef MP-WEIXIN -->
				<prize-flying ref="qipao" v-if="boxData[this.swiperCurrent]" :key="`flying-${flyingKey}`"
					:box-id="boxData[this.swiperCurrent].id"></prize-flying>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<view class="prize-flying">
					<template v-for="(item, index) in flyLeftList">
						<view :key="index" :class="['fly-prize', 'fly-left']"
							:style="{ animationDuration: flySpeed + 's' }">
							<image :src="item.goods_image" mode=""></image>
						</view>
						<!-- <view :key="index" :class="['fly-prize', 'fly-left']" :style="flyStyle(flyLeft)"></view> -->
					</template>
					<template v-for="(item, index) in flyCenterList">
						<view :key="index" :class="['fly-prize', 'fly-center']"
							:style="{ animationDuration: flySpeed + 's' }">
							<image :src="item.goods_image" mode=""></image>
						</view>
					</template>
					<template v-for="(item, index) in flyRightList">
						<view :key="index" :class="['fly-prize', 'fly-right']"
							:style="{ animationDuration: flySpeed + 's' }">
							<image :src="item.goods_image" mode=""></image>
						</view>
					</template>
				</view>
				<!-- #endif -->
			</view>
			<view class="arrow n-flex-row n-justify-between">
				<image @click="
            prev();
          bf_anjianyin();
          " src="../../static/image/arrow-left.png" mode=""></image>
				<image @click="
            next();
          bf_anjianyin();
          " src="../../static/image/arrow-right.png" mode=""></image>
			</view>
			<image src="https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/drawing16.png" mode="widthFix" class="shou">
			</image>
			<view class="dizuobox">
				<image class="dizuo" src="https://v3mh6.oss-cn-beijing.aliyuncs.com/kaijiangdonghua/ro1.png"
					mode="widthFix">
				</image>
				<text class="price">
					￥
					<text class="num">{{ boxPrice }}</text>
					/个
				</text>
			</view>
			<view class="maxBox">
				<view class="maxyou" v-if="maxYou">
					{{ maxYou }}
				</view>
			</view>
		</view>

		<view class="card">
			<swiper circular active-class="active" style="height: 210rpx" previous-margin="270rpx" next-margin="270rpx"
				:current="swiperCurrent" @change="changeIdx">
				<swiper-item @click="
            selectCard(idx);
          bf_anjianyin();
          " class="cardItem" :class="swiperCurrent == idx ? 'active' : ''" v-for="(item, idx) in boxData" :key="idx">
					<!-- <image src="../../static/image/float.jpg" mode="widthFix"></image> -->
					<view class="car">
						<image :src="item.box_info.footer_image" mode=""></image>
						<view class="boxname" style="
                word-wrap: break-word;
                table-layout: fixed;
                word-break: break-all;
              ">{{ item.box_info.title }}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="qbtn n-flex-row n-justify-between">
			<view class="left">
				<image @click="
            ouhuangshow = true;
          bf_anjianyin();
          " src="../../static/image/enimg/drawing10.png" mode="heightFix"></image>
			</view>
			<!-- <view class="kaixiang" @click="
            choujiang();
          bf_anjianyin();
          ">
		  立即开盒
        <image src="https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/drawing11.gif" mode="widthFix"></image>
        <view class="biankuang">
          <text></text>
          <text></text>
          <text></text>
          <text></text>
        </view>
      </view> -->
			<view class="c-btn" @click="choujiang">
				<view class="biankuang">
					 {{ $t('立即开盒') }}
					<text></text>
					<text></text>
					<text></text>
					<text></text>
				</view>
			</view>
		</view>
		<view class="tip">谢绝未成年人使用或在监护人的监督指导下体验</view>

		<!-- 免费试玩 -->
		<image src="../../static/image/enimg/drawing7.png" class="free" mode="" @click="shiwan()">
		</image>
		<!-- 新手教程 -->
		<image src="../../static/image/enimg/drawing8.png" class="xinshou" mode="widthFix" @click="
            videoShow = true;
          bf_anjianyin();
          "></image>

		<!-- 优惠券弹窗 -->
		<u-popup v-model="couponshow" mode="center" :custom-style="{ backgroundColor: 'rgba(0, 0, 0, 0)' }">
			<view class="newPeopleBox">
				<view class="newmainBox">
					<scroll-view scroll-y class="youhuilist" v-if="couponList.length > 0">
						<view class="youhuibox" v-for="(item, idx) in couponList" :key="idx">
							<view class="left">
								<view>
									<view class="name">{{ item.name }}</view>
									<view class="price1" v-if="item.threshold_type == 2">无门槛</view>
									<view class="price1" v-if="item.threshold_type == 1 && item.join_type == 1">
										<block v-if="item.type == 1">满{{ item.threshold_money }}可用</block>
										<block v-if="item.type == 2">{{ item.discount }}折</block>
									</view>
									<view class="price1" v-if="item.threshold_type == 1 && item.join_type == 2">盲盒专享
									</view>
								</view>
							</view>
							<view class="right">
								<view>
									<view class="price">
										<template v-if="item.type == 1">￥{{ item.amount }}</template>
										<template v-if="item.type == 2">{{ item.discount }}折</template>
									</view>
									<!-- <view class="ling active" @click="receive(item.id, item.is_lingqu, idx)">领取</view> -->
									<!-- <view class="ling" :class="item.is_lingqu == 0 ? 'active' : 'yiling'" @click="receive(item.id, item.is_lingqu, idx)">
										{{ item.is_lingqu == 0 ? '领取' : '已领取' }}
									</view> -->
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="youhuilist" v-else>
						<u-empty text="暂无可领取的优惠券" mode="coupon"></u-empty>
					</view>
				</view>
				<view class="btm-2" style="ma">
					<image class="btmBg" src="http://mhimg.69box.cn/kaixiang/rv.webp" mode="widthFix"></image>
					<view class="btn1">
						<image v-if="couponList.length > 0" @click="receive(1)"
							src="http://mhimg.69box.cn/kaixiang/sd.png" mode="widthFix"></image>
					</view>
				</view>

				<view class="off">
					<image @click="couponshow = false" src="http://mhimg.69box.cn/kaixiang/down.png" mode=""></image>
				</view>
			</view>
		</u-popup>

		<!-- 道具卡 -->
		<u-popup v-model="daojushow" mode="center">
			<view class="box11">
				<view class="daojubox">
					<view class="top">
						<image :src="isCard
              ? '../../static/image/qp.png'
              : '../../static/image/qn.png'
            " mode="widthFix"></image>
						<!-- <view class="rulebox" v-if="isCard" @click="isCard = false;bf_anjianyin();"> -->
						<view class="rulebox" v-if="isCard" @click="go_prop_card_rule">
							<view class="wen">?</view>
							使用规则
						</view>
					</view>
					<view v-if="isCard">
						<scroll-view scroll-y style="height: 755rpx; width: 100%; margin-top: 30rpx">
							<view class="cardList">
								<view class="list" v-for="(item, idx) in cardList" :key="idx">
									<view class="goods n-flex-row">
										<view class="picbox">
											<image :src="item.card_data.image" mode=""></image>
										</view>
										<view class="textbox">
											<view class="tit">
												{{ item.card_data.title }}
											</view>
											<view class="two">{{ item.card_data.introduce }}</view>
											<view class="qi n-flex-row n-justify-between">
												<view>领取时间:{{
            $u.timeFormat(
              item.create_time,
              "yyyy-mm-dd hh:MM:ss"
            )
          }}</view>
												<!-- <u-icon color="#999" label-color="#999" label-size="24"
													label-pos="left" name="arrow-down" label="适用盲盒">
												</u-icon> -->
											</view>
										</view>
									</view>
									<view class="tip1">
										{{ item.remarks }}
									</view>
								</view>
							</view>
							<u-empty text="暂无道具卡" mode="favor" color="#766ed0" icon-color="#766ed0"
								:show="cardShow"></u-empty>
						</scroll-view>
					</view>

					<view v-else class="explain">
						<view class="tit">
							♦
							<text>重抽卡</text>
							♦
						</view>
						<scroll-view scroll-y class="text" style="height: 560rpx">内容</scroll-view>
						<view class="btm">
							<view class="btn2" @click="
            isCard = true;
          bf_anjianyin();
          ">
								我知道了
							</view>
						</view>
					</view>
				</view>
				<view class="off">
					<image @click="
            daojushow = false;
          bf_anjianyin();
          " src="http://mhimg.69box.cn/kaixiang/down.png" mode=""></image>
				</view>
			</view>
		</u-popup>

		<view v-if="videoShow" class="mask">
			<view class="block" @tap.stop>
				<video id="myVideo" :src="videoSrc" show-fullscreen-btn="false" :show-mute-btn="true" autoplay
					class="block_video"></video>
				<view class="video-box-btm" @click="
            videoShow = false;
          bf_anjianyin();
          ">
					我知道了
				</view>
			</view>
		</view>

		<!-- 视频 -->
		<!-- <video :src="videoSrc" :show-mute-btn="true" :style="{ width: '600rpx', height: '400' }" autoplay v-if="videoShow"></video> -->
		<!-- 		<u-popup v-model="videoShow" mode="center">
			<view class="video-box-zo">
				<view class=""></view>
				<view class="vbox-video">
					<video :src="videoSrc" :show-mute-btn="true" :style="{width:'20rpx',height:'100rpx'}" autoplay v-show="videoShow"></video>
				</view>
				<view
					class="video-box-btm"
					@click="
						videoShow = false;
						bf_anjianyin();
					"
				>
					我知道了
				</view>
			</view>
		</u-popup> -->

		<!-- 订单 -->
		<u-popup v-model="orderShow" mode="bottom" :closeable="!selectCoupon">
			<view class="orderbox" v-if="!selectCoupon">
				<view class="tit">确认订单</view>
				<view class="con">
					<view class="box1">
						<view class="goods n-flex-row">
							<image v-if="boxData.length != 0" :src="boxData[swiperCurrent].image" mode=""></image>
							<view class="info">
								<view class="t">{{ boxName }}</view>
								<view class="two">
									<view class="price">￥{{ boxPrice }}</view>
									<view class="num">x{{ num }}</view>
								</view>
							</view>
						</view>
						<view v-if="usedCoupon.length != 0" @click="
            goSelect();
          bf_anjianyin();
          " class="rowitem n-flex-row n-justify-between" style="margin-top: 10rpx">
							<view class="l">
								<image src="../../static/image/quanlogo.png" mode=""></image>
								优惠券
							</view>
							<u-icon label-pos="left" :label-color="youhuiNum == '0' ? '#999' : '#d81e06'" color="#999"
								name="arrow-right" :label="youhuiNum == '0' ? '未选择优惠券' : '-￥' + youhuiNum
            "></u-icon>
						</view>
						<!-- 星石抵扣 -->
						<view class="rowitem n-flex-row n-justify-between">
							<view class="l">
								<image src="../../static/image/y2.png" mode=""></image>
								星石
							</view>
							<view class="" style="color: #999">
								{{
            diKou == 0
              ? "无可抵扣数量"
              : "使用" +
              (
                diKou * boxData[swiperCurrent].integral2_dikou_rmb
              ).toFixed(3) +
              "星石抵扣￥" +
              diKou
          }}
							</view>
						</view>
						<view class="total" v-if="offer_remarks != ''">
							优惠说明：
							<text>{{ offer_remarks }}</text>
						</view>
					</view>

					<view class="box1" style="margin-top: 20rpx">
						<u-radio-group style="display: block" width="34rpx" v-model="paymode" active-color="#70DDE0">
							<!-- #ifdef MP-WEIXIN || H5 -->
							<view class="rowitem payrow" @click="
            selectPay('wechat');
          bf_anjianyin();
          ">
								<view class="l">
									<image src="../../static/image/weixinf.png" mode=""></image>
									微信
								</view>
								<u-radio name="wechat"></u-radio>
							</view>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS || H5 -->
							<view class="rowitem payrow" @click="
            selectPay('alipay');
          bf_anjianyin();
          ">
								<view class="l">
									<image src="../../static/image/zhifubao.png" mode=""></image>
									支付宝
								</view>
								<u-radio name="alipay"></u-radio>
							</view>
							<!-- #endif -->
							<view class="rowitem payrow" @click="selectPay('integral')">
								<view class="l">
									<image src="../../static/image/xr.png" mode=""></image>
									幸运币(余额：{{ userInfo.integral }})
								</view>
								<u-radio name="integral"></u-radio>
							</view>
						</u-radio-group>
					</view>
					<scroll-view :scroll-top="0" scroll-y="true" class="scroll-rule-Y">
						<u-parse :html="deliveryRuleText"></u-parse>
					</scroll-view>
				</view>
				<view class="obtm" v-if="orderShow">
					<button @click="$debounceClick(pay), $debounceClic(bf_anjianyin)">
						立即支付
						<text>￥{{ pay_price }}</text>
					</button>
				</view>
				<view class="xieyi">
					<u-checkbox v-model="xieyi" shape="circle" active-color="#70DDE0" label-size="22">
						我已满18岁，已阅读并同意
						<text @click.stop="$.to('/pages/my/agreement?type=payment_agreement')">《支付服务协议》</text>
						<text @click.stop="$.to('/pages/my/agreement?type=delivery_rule')">《发货服务协议》</text>
						<text @click.stop="$.to('/pages/my/agreement?type=play_agreement')">《玩法介绍》</text>
						<text @click.stop="$.to('/pages/my/agreement?type=exchange_tisp')">《转换须知》</text>
					</u-checkbox>
				</view>
			</view>

			<view class="syouhui" v-else>
				<view class="youtit">
					<view class="back" @click="
            selectCoupon = false;
          bf_anjianyin();
          ">
						<u-icon size="40" name="arrow-left"></u-icon>
					</view>
					<view class="youhuit">优惠详情</view>
				</view>
				<view class="youhuicon">
					<scroll-view scroll-y class="shitu">
						<radio-group>
							<view class="couList" v-for="(item, idx) in usedCoupon" :key="idx" @click="
            selectCoupon1(item);
          bf_anjianyin();
          ">
								<view class="l">
									<view class="aa">
										￥
										<text class="pri">{{ item.number }}</text>
										<view class="tiao" v-if="item.coupon_data.type == 0">无门槛</view>
										<view class="tiao" v-if="item.coupon_data.type == 1">
											满{{ item.tj_number }}减{{ item.number }}</view>
									</view>
								</view>
								<view class="r">
									<view class="ll">
										<view class="t">{{ item.coupon_data.title }}</view>
										<!-- <view class="use">可用</view> -->
										<view class="qi" style="margin-top: 20rpx">
											有效期至
											{{
            $u.timeFormat(
              item.coupon_data.end_time,
              "yyyy-mm-dd hh:MM:ss"
            )
          }}
										</view>
									</view>
									<view class="rr">
										<radio :value="item.id + ''" :checked="currentCoupon.id == item.id"
											color="#63D7D6" style="transform: scale(0.8)" />
									</view>
								</view>
							</view>
						</radio-group>
					</scroll-view>
					<view class="btn" @click="
            confirmCoupon();
          bf_anjianyin();
          ">
						确认
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="luckshow" mode="center">
			<view class="luckbox">
				<view class="top n-flex-row">
					<image class="titpic" src="../../static/image/enimg/lucktit.png" mode="widthFix">
					</image>
					<image v-if="boxData.length != 0" class="goodsPic" :src="boxData[swiperCurrent].box_info.image"
						mode="widthFix">
					</image>
				</view>
				<view class="option">
					<view class="row" v-if="boxData.length != 0">
						<view class="chou" v-for="(item, idx) in boxData[swiperCurrent].box_info.buy_data1" :key="idx"
							@click="
            chou(item);
          bf_anjianyin();
          ">
							<view class="jian" v-if="!isShiwan && item.youhui_num > 0">{{ item.youhui_title }}</view>
							<view class="b">
								<view class="tit">{{ item.title }}</view>
								<view v-if="!isShiwan">
									￥{{ item.buy_price.toFixed(3) }}
									<text class="yuanj">￥{{ (boxPrice * item.number).toFixed(3) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="ouhuangshow" mode="bottom">
			<view class="ouhuang">
				<view class="ouhuang_bg">
					<view class="close">
						<u-icon @click="
            ouhuangshow = false;
          bf_anjianyin();
          " name="close-circle-fill" color="#ccc" size="65"></u-icon>
					</view>
					<scroll-view scroll-y class="scroll">
						<view class="listbox">
							<view class="list" v-for="(item, idx) in ouList" :key="idx">
								<view class="picbox" @click="
            advert_on(item);
          bf_anjianyin();
          ">
									<image :src="item.image" mode="mode"></image>
									<view class="text n-flex-row n-justify-between">
										<view>{{ item.name }}</view>
										<u-icon name="arrow-right" label-pos="left" label="立即参与"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<!-- <show-result :key="0" ref="result-popup" :num="boxNum" @accept="toMyBox()" @recycle="recycle"
			:type="type" @close="resultKey++"></show-result> -->
		<kefu :isShow="kfshow" ref="child" @cusEvent="hide"></kefu>
		<u-popup v-model="testShow" mode="center">
			<view class="tanBox">
				<view class="pic">
					<image @click="
            advert_on(tanCon);
          bf_anjianyin();
          " :src="tanCon.image" mode="widthFix"></image>
				</view>
				<view class="off">
					<image @click="
		  testShow = false
            tancancel();
          bf_anjianyin();
          " src="http://mhimg.69box.cn/kaixiang/down.png" mode=""></image>
				</view>
			</view>
		</u-popup>

		<!-- 中奖详情 -->
		<u-popup v-model="tongShow" mode="center" :custom-style="{ backgroundColor: 'rgba(0, 0, 0, 0)' }"
			:mask-custom-style="{ background: 'rgba(0, 0, 0, 0.9)' }">
			<view class="tongShowView">
				<view class="tongShowView-0">{{ tongObj.username }}</view>
				<view class="tongShowView-1">
					<u-divider bg-color="transparent" color="#f5ebc3" border-color="#f5ebc3">获得</u-divider>
				</view>
				<view class="tongShowView-2">
					<view class="tongShowView-2-img">
						<image :src="tongObj.goods_image" mode=""></image>
					</view>
					<view class="tongShowView-2-text">{{ tongObj.goods_name }}</view>
				</view>
				<view class="tongShowView-3" @click="tongShow = false">我也要玩</view>
			</view>
		</u-popup>
		<uni-popup ref="popupLimits" type="top" heigth="200" :is-mask-click="false" @maskClick="popupClcik">
			<view class="qweqwe">
				<view>申请手机或耳机的麦克风权限，便于您使用该功进行通话录音或本地录音，方便与在线客服沟通。</view>
				<view>申请相册（相机）权限，便于您使用该功能上传您的照片/图片/视频及用于更换头像、与客服沟通等场景中读取和写入相册和文件内容。</view>
			</view>
		</uni-popup>
		<u-tabbar v-model="current" :list="tabbar" :mid-button="box_view"></u-tabbar>
	</view>
</template>

<script>
	import kefu from "@/components/kefu.vue";
	import colorGradient from "uview-ui/libs/function/colorGradient";
	import prizeFlying from "@/components/prize-flying.vue";
	import config from "../../utils/config.js";
	const anjianyin = config.baseUrl + "/static/api/video/anjian.mp3";
	import {
		box_view
	} from "@/utils/keyControl.js";
	import {
		tabbar
	} from "@/common/tabbar.js";
	const anniumusic = uni.createInnerAudioContext();
	// #ifdef APP-PLUS
	var qiyuModule = uni.requireNativePlugin("Netease-QiyuModule");
	const modal = uni.requireNativePlugin("modal");
	import {
		qy_appKey
	} from "@/utils/keyControl.js";
	// #endif
	export default {
		data() {
			return {
				testShow: false,
				current: 2,
				// tabbar: tabbar,
				currentCoupon: "", //当选择的优惠券
				Confirmed: "", //已确认的优惠券
				youhuiNum: "0",
				swiperCurrent: 0,
				couponshow: false, //优惠券弹窗
				daojushow: false, //道具卡弹窗
				isCard: true, //我的道具卡与使用规则切换
				videoShow: false, //视频弹窗
				orderShow: false, //订单弹窗
				videoSrc: "",
				muteBgMusic: false, //是否静音
				// #ifdef MP-WEIXIN || H5
				paymode: "wechat",
				// #endif

				// #ifdef APP-PLUS
				paymode: "alipay",
				// #endif
				xieyi: true,
				selectCoupon: false, //选择优惠券
				luckshow: false, //抽奖弹窗
				boxData: [],
				boxPrice: "0.00", //盲盒价格
				ouhuangshow: false, //欧皇弹窗
				ouList: [], //欧皇福利列表
				isShiwan: true, //是否试玩
				num: "", //几抽
				kfshow: false,
				couponList: [], //优惠券列表
				cardList: [], //道具卡
				cardShow: false,
				usedCoupon: [],
				tongView: [], //需要展示的数据。
				tongList: [], //中奖通知
				tong: "",
				tnoTime: null,
				dings: "",
				maxYou: "", //最高优惠
				tanList: [], //弹窗列表
				tanShow: false,
				tanCon: "",
				tanidx: 0,
				pay_price: 0, //支付价格
				buy_fangan: [], //购买方案
				flyingKey: 0,
				xing: "", //星石
				diKou: 0, //抵扣星石数量
				boxName: "", //盲盒名称

				prizeList: [],
				flyLeftList: [],
				flyCenterList: [],
				flyRightList: [],
				indexRecord: 0, //记录奖品下标
				intervalTime: 2, //飞出频率 秒
				interval: null,
				flySpeed: 25, //飞行速度 秒 越小越快
				currentCoupon_id: 0, //优惠券ID
				userInfo: {},
				offer_remarks: "",
				noClick: true,
				deliveryRuleText: "",
				deliveryRuleTextTitle: "",
				tongShow: false,
				isSHowBox: false, //是否效果超过1元
				box_view: false,
				tongObj: {
					username: "",
					goods_image: "",
					goods_name: "",
				}, //中奖详情
			};
		},
		onLoad() {
			this.box_view = box_view;
			//验证消费金额
			this.handleChouShow();
			//不控制 显示200元以上
			// this.getManghe1();
			//控制 显示200元以内
			// this.getManghe2();
			//-------

			this.getPop();
			this.getOuHuang();
			this.getvideo();
			uni.$on("music", (data) => {
				this.muteBgMusic = data;
			});
			uni.loadFontFace({
				family: "myfont",
				source: 'url("https://m-admin.mhbox.top/YouSheBiaoTiHei.ttf")',
			});
			anniumusic.src = anjianyin;

			// APP强制绑定手机号
			// #ifdef APP-PLUS
			if (
				uni.getStorageSync("user").id != "" &&
				uni.getStorageSync("user").mobile.length != 11
			) {
				uni.redirectTo({
					url: "/pages/my/changePhone",
				});
			}
			// #endif
		},
		computed: {
			prizeLength() {
				return this.prizeList.length;
			},
			tabbar() {
				return [{
						id: 0,
						iconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab1.png",
						selectedIconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab2.png",
						text: this.$t("首页"),
						customIcon: false,
						pagePath: "/pages/tabBar/home",
					},
					{
						id: 1,
						iconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab3.png",
						selectedIconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab4.png",
						text: this.$t("商城"),
						customIcon: false,
						pagePath: "/pages/tabBar/mall",
					},
					{
						id: 5,
						iconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab5.png",
						selectedIconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab6.png",
						text: this.$t("盒子"),
						midButton: true,
						customIcon: false,
						pagePath: "/pages/tabBar/old_home",
					},
					{
						id: 2,
						iconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab7.png",
						selectedIconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab8.png",
						text: this.$t("仓库"),
						customIcon: false,
						pagePath: "/pages/tabBar/cangku",
					},
					{
						id: 3,
						iconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab9.png",
						selectedIconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab10.png",
						text: this.$t("我的"),
						customIcon: false,
						pagePath: "/pages/tabBar/my",
					},
				]
			},
		},
		onShow() {
			this.muteBgMusic = uni.getStorageSync("muteBgMusic");
			this.getCard();
			this.getTong();
			this.getYouhui();
			this.getDeliveryRuleText();
			// #ifdef APP-PLUS
			this.initSetUserInfo();
			// #endif
		},
		onHide() {
			clearInterval(this.tnoTime);
		},
		destroyed() {
			//销毁
			clearInterval(this.interval);
		},
		components: {
			kefu,
			prizeFlying,
		},
		// onShow() {
		// 	this.getCard()
		// },
		methods: {
			/* 用户展示显示连抽 用于商店审核 */
			handleChouShow() {
				this.$http({
					url: "api/common/get_xiaofei_count",
					data: {
						uid: uni.getStorageSync("user").id || 0,
					},
				}).then((res) => {
					console.log(res, "212");
					if (res.data.code == 1) {
						// count限制多少可见 user_count消费多少 isconsumption是否消费大于等于1元
						const {
							isconsumption
						} = res.data.data;
						this.isSHowBox = JSON.parse(isconsumption);
						this.getManghe();
					}
				});
			},
			isloadedmetadata(val) {
				console.log(val, "2111111111111");
			},
			// 领取全部优惠券
			receive(atype) {
				console.log(2111111111111111);
				this.$http({
						url: "api/member/receive_coupon",
						data: {
							a_type: atype,
						},
					})
					.then((res) => {
						if (res.data.code == 1) {
							this.$tip.tip(res.data.msg);
							this.couponshow = false;
							this.newcouponshow = false;
						} else {
							this.$tip.tip(res.data.msg);
						}
					})
					.catch((err) => {});
			},

			openTong(obj) {
				this.tongObj = obj;
				this.tongShow = true;
			},
			getDeliveryRuleText() {
				this.$http({
						url: "api/common/get_agreement",
						data: {
							name: "delivery_rule",
						},
					})
					.then((res) => {
						console.log(res);
						if (res.data.code == 1) {
							this.deliveryRuleText = res.data.data.content;
							this.deliveryRuleTextTitle = res.data.data.title;
						} else {
							this.$tip.tip(res.data.msg);
						}
					})
					.catch((err) => {});
			},
			bf_anjianyin() {
				// return;
				// anniumusic.stop();
				// anniumusic.play();
			},
			//前往查看道具卡规则
			go_prop_card_rule() {
				uni.navigateTo({
					url: "/pages/my/agreement?type=prop_card_rule",
				});
				bf_anjianyin();
			},
			// 获取星石
			getXing() {
				this.$http({
						url: "api/member/get_user_info",
					})
					.then((res) => {
						if (res.data.code == 1) {
							this.userInfo = res.data.data;
							uni.setStorageSync("user", res.data.data);
							uni.$emit("updataUser");
							this.xing = res.data.data.integral2;
							if (this.xing == 0) {
								this.get_box_price();
								return;
							}
							var max = (this.boxPrice * this.num * 0.1).toFixed(3);
							if (
								this.xing / this.boxData[this.swiperCurrent].integral2_dikou_rmb >
								max
							) {
								this.diKou = max;
							} else {
								this.diKou = (
									this.xing / this.boxData[this.swiperCurrent].integral2_dikou_rmb
								).toFixed(3);
							}
							this.get_box_price();
						}
					})
					.catch((err) => {});
			},
			//加载奖品列表
			loadPrizeList() {
				console.log("掉用气泡");
				// if (!this.boxId) return
				this.$http({
						url: "api/common/get_blind_box_goods",
						data: {
							blind_box_id: this.boxData[this.swiperCurrent].id,
						},
					})
					.then((res) => {
						console.log(res);
						if (res.data.code == 1) {
							this.prizeList = res.data.data.goods_list;
							this.flyInterval();
						}
					})
					.catch((err) => {});
			},
			//循环
			flyInterval() {
				this.pushFlyList();
				this.interval = setInterval(() => {
					this.pushFlyList();
				}, this.intervalTime * 1000);
			},
			pushFlyList() {
				let count = 0;
				while (count < 3) {
					if (this.indexRecord == this.prizeLength - 1) {
						this.indexRecord = 0;
					} else {
						this.indexRecord++;
					}
					let prize = this.prizeList[this.indexRecord];
					switch (count) {
						case 0:
							this.flyLeftList.push(prize);
							break;
						case 1:
							this.flyCenterList.push(prize);
							break;
						case 2:
							this.flyRightList.push(prize);
							break;
					}
					count++;
				}
			},
			flyStyle(prize) {
				return {
					background: `url(${prize.image})`,
					"-webkit-animation-duration": `${this.flySpeed}s`,
					"animation-duration": `${this.flySpeed}s`,
				};
			},

			tancancel() {
				this.tanShow = false;
				// console.log(this.tanShow  ,111111111111)
				//      this.tanidx += 1;
				//      if (this.tanidx < this.tanList.length) {
				//        this.tanShow = true;
				//      } else {
				//        return;
				//      }
				//      this.tanCon = this.tanList[this.tanidx];
			},
			getTong() {
				this.$http({
						url: "api/common/get_blind_box_open_log",
					})
					.then((res) => {
						if (res.data.code == 1) {
							this.tongList = res.data.data;
							this.tongz();
						}
					})
					.catch((err) => {});
			},
			tongz() {
				if (this.tongList.length == 0) {
					return;
				}
				this.tongView = [];
				let arr = this.tongList.map((item) => {
					let obj = {};
					obj.text = `${this.$t('恭喜')} ${item.username} ${this.$t('获得')} ${item.goods_name}`;
					obj.level_name = item.level_name || "传说";
					obj.goods_image = item.goods_image;
					obj.bg =
						"https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01KeUqPk2JfEvwQ6LPW_!!2215984279448.png";
					return obj;
				});

				//定时显示顶部信息
				let srcData = arr.map((item) => item);

				let time = 2500;

				let blink = false;

				let ctrl = this.initTimer(
					time,
					() => {
						if (!srcData.length) {
							ctrl.stop();
						}
						if (blink) {
							blink = !blink;
							this.tongView.shift();
						} else {
							blink = !blink;
							let one = srcData.shift();
							this.tongView.push(one);
						}
					}, {
						autoStart: true,
						im: true,
					}
				);

				this.tongCtrl = ctrl;
			},
			lingquan() {
				this.getYouhui();
			},
			initTimer(
				t,
				cb,
				opt = {
					autoStart: false,
					im: false,
				}
			) {
				let pauseFlag = true;
				if (opt.autoStart) {
					pauseFlag = false;
				}

				this.tnoTime = setInterval(() => {
					if (!pauseFlag) {
						cb();
					}
				}, t);
				// Ctrl
				return {
					pause: () => {
						pauseFlag = true;
					},
					start: () => {
						if (opt.im) {
							cb();
						}
						pauseFlag = false;
					},
					stop: () => {
						clearInterval(this.tnoTime);
					},
				};
			},
			// 选择优惠券
			selectCoupon1(val) {
				if (this.currentCoupon == val) {
					this.currentCoupon = "";
					this.Confirmed = "";
					this.youhuiNum = 0;
					this.currentCoupon_id = 0;
					this.get_box_price();
					return;
				}
				this.currentCoupon = val;
				// alert(val);
			},
			// 确认选择优惠券
			confirmCoupon() {
				// alert(this.currentCoupon.id);
				if (!this.currentCoupon) {
					this.Confirmed = "";
					this.youhuiNum = 0;
					this.currentCoupon_id = 0;
					this.selectCoupon = false;
					this.get_box_price();
					return;
				}
				console.log(this.currentCoupon, "已选择");
				if (this.currentCoupon.type != 0) {
					if (
						this.boxPrice * this.num <
						this.currentCoupon.coupon_data.tj_number
					) {
						this.$tip.tip(this.$t("该优惠券不可用"));
						return;
					}
				}
				this.Confirmed = this.currentCoupon;
				this.youhuiNum = this.Confirmed.coupon_data.number;
				this.currentCoupon_id = this.currentCoupon.id;
				this.selectCoupon = false;
				this.get_box_price();
			},
			goSelect() {
				this.selectCoupon = true;
				this.getNotUsed();
			},
			// 获取未使用优惠券
			getNotUsed() {
				this.$http({
						url: "api/member/get_my_coupon",
					})
					.then((res) => {
						console.log(res, "");
						if (res.data.code == 1) {
							this.usedCoupon = res.data.data;
						} else {
							this.show = true;
						}
					})
					.catch((err) => {});
			},
			// 获取我的道具卡
			getCard() {
				this.$http({
						url: "api/member/get_my_card",
					})
					.then((res) => {
						if (res.data.code == 1) {
							if (res.data.data.length == 0) {
								this.cardShow = true;
							} else {
								this.cardShow = false;
							}
							this.cardList = res.data.data;
						} else {
							this.cardShow = true;
						}
					})
					.catch((err) => {});
			},
			// 领取全部优惠券
			receiveall() {
				let arr = [];
				this.couponList.forEach((item) => {
					if (item.is_lingqu == 0) {
						arr.push(item.id);
					}
				});
				if (arr.length == 0) {
					this.$tip.tip(this.$t("暂无可领取优惠券"));
					return;
				}
				var arrJoinString = arr.join();
				this.$http({
						url: "api/member/receive_coupon",
						data: {
							cid: arrJoinString,
						},
					})
					.then((res) => {
						if (res.data.code == 1) {
							this.couponList.forEach((item) => {
								item.is_lingqu = 1;
							});
							this.getNotUsed();
							this.$tip.tip(res.data.msg);
						} else {
							this.$tip.tip(res.data.msg);
						}
					})
					.catch((err) => {});
			},
			getYouhui() {
				this.$http({
						url: "api/common/get_coupon",
						data: {
							uid: uni.getStorageSync("user").id,
							a_type: 1,
						},
					})
					.then((res) => {
						console.log(res, "优惠券");
						if (res.data.code == 1) {
							this.couponList = res.data.data;
						}
					})
					.catch((err) => {});
			},
			// 支付
			pay() {
				if (!this.xieyi) {
					this.$tip.tip(this.$t("请阅读并同意协议"));
					return;
				}
				if (this.paymode == "") {
					this.$tip.tip(this.$t("请选择支付方式"));
					return;
				}
				let price = this.pay_price;
				uni.showLoading({
					title: this.$t('正在请求支付')+'...',
					mask: true,
				});
				this.$http({
						url: "api/pay/go_pay",
						data: {
							boxid: this.boxData[this.swiperCurrent].id,
							num: this.num,
							paymode: this.paymode,
							currentCoupon_id: this.currentCoupon.id,
							price: price,
							xs: (
								this.diKou * this.boxData[this.swiperCurrent].integral2_dikou_rmb
							).toFixed(0),
							// #ifdef H5
							client: 0,
							// #endif

							// #ifdef MP-WEIXIN
							client: 1,
							// #endif

							// #ifdef APP-PLUS
							client: 2,
							// #endif
						},
					})
					.then((res) => {
						uni.hideLoading();
						if (res.data.code == 1) {
							// console.log("res.data: " + JSON.stringify(res.data.data.pay_data));return;
							this.orderShow = false;
							// #ifdef H5
							this.fun.go_h5pay(res.data.data);
							// #endif

							// #ifdef MP-WEIXIN
							this.fun
								.go_mpwxpay(res.data.data)
								.then((payres) => {
									this.$tip.tip(this.$t("支付成功"), "success");
									setTimeout(() => {
										uni.navigateTo({
											url: "/pages/home/luckbox",
										});
										setTimeout(() => {
											uni.$emit("paydata", {
												ooid: res.data.data.order_no,
												id: this.boxData[this.swiperCurrent].id,
												num: this.num,
											});
										}, 600);
									}, 700);
								})
								.catch((payerr) => {
									this.$tip.tip(this.$t("支付失败"));
								});
							// #endif

							// #ifdef APP-PLUS
							if (this.paymode == "wechat") {
								this.fun
									.go_appwxpay(res.data.data.pay_data)
									.then((payres) => {
										this.$tip.tip(this.$t("支付成功"), "success");
										setTimeout(() => {
											uni.navigateTo({
												url: "/pages/home/luckbox",
											});
											setTimeout(() => {
												uni.$emit("paydata", {
													ooid: res.data.data.order_no,
													id: this.boxData[this.swiperCurrent]
														.id,
													num: this.num,
												});
											}, 600);
										}, 700);
									})
									.catch((payerr) => {
										this.$tip.tip(this.$t("支付失败"));
									});
							} else {
								this.fun
									.go_appalipay(res.data.data.pay_data)
									.then((payres) => {
										this.$tip.tip(this.$t("支付成功"), "success");
										setTimeout(() => {
											uni.navigateTo({
												url: "/pages/home/luckbox",
											});
											setTimeout(() => {
												uni.$emit("paydata", {
													ooid: res.data.data.order_no,
													id: this.boxData[this.swiperCurrent]
														.id,
													num: this.num,
												});
											}, 600);
										}, 700);
									})
									.catch((payerr) => {
										this.$tip.tip(this.$t("支付失败"));
									});
							}
							// #endif
						} else if (res.data.code == 8) {
							//0元免支付的
							this.orderShow = false;
							this.$tip.tip(this.$t("支付成功"), "success");
							this.go_luckbox(res.data.data);
						} else {
							console.log("res.data: " + JSON.stringify(res.data));
							return;
							this.$tip.tip(res.data.msg);
						}
					})
					.catch((err) => {});
				return;
			},
			//前往开盒
			go_luckbox(data) {
				setTimeout(() => {
					uni.navigateTo({
						url: "/pages/home/luckbox",
					});
					setTimeout(() => {
						uni.$emit("paydata", {
							ooid: data.ooid,
							id: this.boxData[this.swiperCurrent].id,
							num: this.num,
						});
					}, 600);
				}, 700);
			},
			hide() {
				this.kfshow = false;
			},
			//获取ip
			getIp() {
				this.$http({
						url: "api/Ios/get_ip",
					})
					.then((res) => {
						if (res.data.code == 1) {
							//res.data.data.ip
							return res.data.data.clear;
						}
					})
					.catch((err) => {});
			},
			/* 初始化七鱼 */
			initSetUserInfo() {
				let userInfo = uni.getStorageSync("user");
				const {
					id,
					username,
					mobile,
					image,
					create_time,
					update_time
				} =
				userInfo;
				qiyuModule.initSdk({
					appKey: qy_appKey,
					appName: "叮当盲盒",
					pkCerName: "PushKit推送证书名；对应云信的pkCername",
				});
				qiyuModule.setUserInfo({
						userId: id || this.getIp(),
						data: JSON.stringify([{
								key: "real_name",
								value: username || "未登录",
							},
							{
								key: "mobile_phone",
								hidden: true,
								value: mobile || "未登录",
							},

							{
								key: "avatar",
								value: image || "https://qiyukf.com/def_avatar.png",
							},
							{
								index: 5,
								key: "reg_date",
								label: "注册日期",
								value: create_time || "未登录",
							},
							{
								index: 6,
								key: "last_login",
								label: "上次登录时间",
								value: update_time || "未登录",
							},
						]),
					},
					(ret) => {
						if (ret.code == 200) {
							// modal.toast({
							// 	message: '成功',
							// 	duration: 1.5
							// });
						} else {
							// modal.toast({
							// 	message: '失败' + JSON.stringify(ret.errMsg),
							// 	duration: 1.5
							// });
						}

						console.log("js打印" + JSON.stringify(ret));
					}
				);
				qiyuModule.updateOptions({
						isPullMessageFromServer: false,
						uiCustomization: {
							hideLeftAvatar: false,
							isShowTitleAvatar: true,
							hideRightAvatar: false,
							inputTextColor: "#ff5500",
						},
					},
					(url) => {
						//点击url的回调
						plus.runtime.openWeb(url);
					}
				);
				qiyuModule.setFinishPageSwitch(true);
				qiyuModule.setPermissionCallback((retCallback) => {
					//麦克风
					let value1 = uni.getStorageSync("is_KEFU_RECORD_AUDIO");
					if (value1 != 1) {
						this.$refs.popupLimits.open();
					}
					plus.android.requestPermissions(
						[
							"android.permission.RECORD_AUDIO",
							"android.permission.MODIFY_AUDIO_SETTINGS",
						],
						function(e) {
							if (e.deniedAlways.length > 0) {
								//权限被永久拒绝
								// 弹出提示框解释为何需要权限，引导用户打开设置页面开启
								console.log("权限被永久拒绝" + e.deniedAlways.toString());
								this.$refs.popupLimits.close();
								uni.setStorageSync("is_KEFU_RECORD_AUDIO", 2);
							}
							if (e.deniedPresent.length > 0) {
								//权限被临时拒绝
								// 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限
								console.log("权限被临时拒绝" + e.deniedPresent.toString());
								this.$refs.popupLimits.close();
								uni.setStorageSync("is_KEFU_RECORD_AUDIO", 0);
							}
							if (e.granted.length > 0) {
								//权限被允许
								console.log("权限被允许" + e.granted.toString());
								this.$refs.popupLimits.close();
								uni.setStorageSync("is_KEFU_RECORD_AUDIO", 1);
							}
						},
						function(e) {
							console.log("Request Permissions error:" + JSON.stringify(e));
							uni.showToast({
								title: "Request Permissions error:" + JSON.stringify(e),
							});
						}
					);
					//相机 相册
					let value2 = uni.getStorageSync("is_KEFU_CAMERA");
					if (value2 != 1) {
						this.$refs.popupLimits.open();
					}
					plus.android.requestPermissions(
						[
							"android.permission.CAMERA",
							"android.permission.READ_EXTERNAL_STORAGE",
						],
						function(e) {
							if (e.deniedAlways.length > 0) {
								//权限被永久拒绝
								// 弹出提示框解释为何需要权限，引导用户打开设置页面开启
								console.log("权限被永久拒绝" + e.deniedAlways.toString());
								this.$refs.popupLimits.close();
								uni.setStorageSync("is_KEFU_CAMERA", 2);
							}
							if (e.deniedPresent.length > 0) {
								//权限被临时拒绝
								// 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限
								console.log("权限被临时拒绝" + e.deniedPresent.toString());
								this.$refs.popupLimits.close();
								uni.setStorageSync("is_KEFU_CAMERA", 0);
							}
							if (e.granted.length > 0) {
								//权限被允许
								console.log("权限被允许" + e.granted.toString());
								this.$refs.popupLimits.close();
								uni.setStorageSync("is_KEFU_CAMERA", 1);
							}
						},
						function(e) {
							console.log("Request Permissions error:" + JSON.stringify(e));
							uni.showToast({
								title: "Request Permissions error:" + JSON.stringify(e),
							});
						}
					);
					//文件存储
					let value3 = uni.getStorageSync("is_KEFU_FILE");
					if (value3 != 1) {
						this.$refs.popupLimits.open();
					}
					plus.android.requestPermissions(
						[
							"android.permission.MANAGE_EXTERNAL_STORAGE",
							"android.permission.WRITE_EXTERNAL_STORAGE",
						],
						function(e) {
							if (e.deniedAlways.length > 0) {
								//权限被永久拒绝
								// 弹出提示框解释为何需要权限，引导用户打开设置页面开启
								console.log("权限被永久拒绝" + e.deniedAlways.toString());
								this.$refs.popupLimits.close();
								uni.setStorageSync("is_KEFU_FILE", 2);
							}
							if (e.deniedPresent.length > 0) {
								//权限被临时拒绝
								// 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限
								console.log("权限被临时拒绝" + e.deniedPresent.toString());
								this.$refs.popupLimits.close();
								uni.setStorageSync("is_KEFU_FILE", 0);
							}
							if (e.granted.length > 0) {
								//权限被允许
								console.log("权限被允许" + e.granted.toString());
								this.$refs.popupLimits.close();
								uni.setStorageSync("is_KEFU_FILE", 1);
							}
						},
						function(e) {
							console.log("Request Permissions error:" + JSON.stringify(e));
							uni.showToast({
								title: "Request Permissions error:" + JSON.stringify(e),
							});
						}
					);
				});
			},
			//企业微信客服
			wxKefu() {
				this.$http({
						url: "api/member/get_weixin_state",
						data: {},
					})
					.then((res) => {
						if (res.data.code == 1) {
							let obj = res.data.data;
							if (obj.weixin_kefu == 1) {
								uni.navigateTo({
									url: "/pagesA/pages/my/wecom",
								});
							} else {
								this.startQiyu();
							}
						} else {
							this.$tip.tip(res.data.msg);
						}
					})
					.catch((err) => {});
			},
			// 联系客服
			startQiyu() {
				qiyuModule.openServiceActivity({
					title: "官方客服",
					source: {
						title: "官方客服",
						robotId: 5395052,
					},
					openMode: "push",
				});
				// this.$refs.child.getKf();
				// this.kfshow = true;
			},
			popupClcik() {
				this.$refs.popupLimits.close();
				this.startQiyu();
			},
			// 查看盲盒
			lookbox(obj) {
				const {
					source,
					box_id,
					zid
				} = obj;
				if (source === 8) {
					/* 今日限定活动需要zid */
					uni.navigateTo({
						url: "/pages/home/kaixiang?id=" +
							box_id +
							"&music=" +
							this.muteBgMusic +
							"&boxSource=" +
							source +
							"&zid=" +
							zid,
					});
					return false;
				}
				if (source) {
					uni.navigateTo({
						url: "/pages/home/kaixiang?id=" +
							box_id +
							"&music=" +
							this.muteBgMusic +
							"&boxSource=" +
							source,
					});
				} else {
					uni.navigateTo({
						url: "/pages/home/kaixiang?id=" + box_id + "&music=" + this.muteBgMusic,
					});
				}
				// box.source_info.week_info
				// uni.navigateTo({
				// 	url: '/pages/home/kaixiang?id=' + id + '&music=' + this.muteBgMusic
				// })
			},
			//广告点击跳转
			advert_on(info) {
				console.log(info, "2111111");
				//指定盲盒跳转
				if (info.link_url_type == 1) {
					uni.navigateTo({
						url: "/pages/home/kaixiang?id=" +
							info.link_url +
							"&music=" +
							this.muteBgMusic,
					});
				}
				//跳转外部网站
				if (info.link_url_type == 2) {
					uni.navigateTo({
						url: "/pages/tabBar/h5",
					});
					setTimeout(() => {
						uni.$emit("go_h5", {
							url: info.link_url,
						});
					}, 600);
				}
				/* 内部网站跳转 */
				if (info.link_url_type == 3) {
					/* 纯展示 */
					if (info.link_url == 2000) {
						this.closeAlert();
						return false;
					}
					/* 首页 */
					if (info.link_url == 2001) {
						this.ouhuangshow = false;
						return false;
					}
					/* 白嫖 */
					if (info.link_url == 2002) {
						uni.navigateTo({
							url: "/pagesA/pages/my/baipiao",
						});
						return false;
					}
					/* 白嫖 */
					if (info.link_url == 2003) {
						uni.navigateTo({
							url: "/pagesA/pages/my/dailyLimit",
						});
						return false;
					}
				}
				// 4 跳转新闻页面
				if (info.link_url_type == 4) {
					uni.navigateTo({
						url: `/pagesA/pages/my/newsContent?id=${info.news_id}`,
					});
					return false;
				}
				// 5 跳转活动盲盒
				if (info.link_url_type == 5) {
					if (info.source === 8) {
						/* 今日限定活动需要zid */
						uni.navigateTo({
							url: "/pages/home/kaixiang?id=" +
								info.box_id +
								"&music=" +
								this.muteBgMusic +
								"&boxSource=" +
								info.source +
								"&zid=" +
								info.z_id,
						});
					} else {
						uni.navigateTo({
							url: "/pages/home/kaixiang?id=" +
								info.box_id +
								"&music=" +
								this.muteBgMusic +
								"&boxSource=" +
								info.source,
						});
					}
					return false;
				}
			},
			//获取弹窗
			getPop() {
				this.$http({
						url: "api/common/get_advert",
						data: {
							type: 1,
						},
					})
					.then((res) => {
						console.log(res);
						if (res.data.code == 1) {
							let arr = [];
							arr = res.data.data;
							if (arr.length != 0) {
								this.testShow = true;
								this.tanList = arr;
								this.tanCon = arr[0];
							}
						}
					})
					.catch((err) => {});
			},
			// 获取欧皇福利
			getOuHuang() {
				this.$http({
						url: "api/common/get_advert",
						data: {
							type: 2,
						},
					})
					.then((res) => {
						console.log(res);
						if (res.data.code == 1) {
							let arr = [];
							this.ouList = res.data.data;
						}
					})
					.catch((err) => {});
			},
			// 获取视频
			getvideo() {
				this.$http({
						url: "api/common/get_general",
					})
					.then((res) => {
						if (res.data.code == 1) {
							this.videoSrc = res.data.data.novice_tutorial;
						}
					})
					.catch((err) => {});
			},
			// 获取盲盒
			// getManghe() {
			// 	this.$http({
			// 		url: "api/common/get_blind_box",

			// 	}).then(res => {
			// 		console.log(res, "盲盒");
			// 		if (res.data.code == 1) {
			// 			this.boxData = res.data.data
			// 			var data = res.data.data
			// 			this.boxPrice = this.boxData[0].price
			// 			this.boxName = this.boxData[0].title
			// 			this.maxYou = this.boxData[0].label
			// 			//#ifdef MP-WEIXIN
			// 			this.loadPrizeList()
			// 			//#endif
			// 			// 数据不够5自动添加
			// 			if (this.boxData.length < 5) {
			// 				for (var i = 0; i < 5; i++) {
			// 					if (this.boxData.length >= 5) {
			// 						return
			// 					}
			// 					this.boxData = this.boxData.concat(data)
			// 				}
			// 			}

			// 		}
			// 	}).catch(err => {});
			// },
			getManghe() {
				this.$http({
						url: "api/common/get_index_list",
					})
					.then((res) => {
						console.log(res, "盲盒");
						if (res.data.code == 1) {
							console.log(this.isSHowBox, "this.isSHowBox");
							//关闭200元控制
							if (this.isSHowBox) {
								this.boxData = res.data.data.filter(
									(obj) => obj.box_info !== null
								);
							} else {
								//开启200元控制
								this.boxData = res.data.data.filter(
									(obj) => obj.box_info !== null && obj.price < 200
								);
							}
							console.log(this.boxData, "this.boxData");
							var data = res.data.data;
							this.boxPrice = this.boxData[0].box_info.price;
							this.boxName = this.boxData[0].box_info.title;
							this.maxYou = this.boxData[0].box_info.label;
							//#ifdef MP-WEIXIN
							this.loadPrizeList();
							//#endif
							// 数据不够5自动添加
							if (this.boxData.length < 5) {
								for (var i = 0; i < 5; i++) {
									if (this.boxData.length >= 5) {
										return;
									}
									this.boxData = this.boxData.concat(data);
								}
							}
						}
					})
					.catch((err) => {});
			},
			getManghe1() {
				this.$http({
						url: "api/common/get_index_list",
					})
					.then((res) => {
						console.log(res, "盲盒");
						if (res.data.code == 1) {
							//关闭200元控制
							this.boxData = res.data.data.filter((obj) => obj.box_info !== null);
							console.log(this.boxData, "this.boxData");
							var data = res.data.data;
							this.boxPrice = this.boxData[0].box_info.price;
							this.boxName = this.boxData[0].box_info.title;
							this.maxYou = this.boxData[0].box_info.label;
							//#ifdef MP-WEIXIN
							this.loadPrizeList();
							//#endif
							// 数据不够5自动添加
							if (this.boxData.length < 5) {
								for (var i = 0; i < 5; i++) {
									if (this.boxData.length >= 5) {
										return;
									}
									this.boxData = this.boxData.concat(data);
								}
							}
						}
					})
					.catch((err) => {});
			},
			getManghe2() {
				this.$http({
						url: "api/common/get_index_list",
					})
					.then((res) => {
						console.log(res, "盲盒");
						if (res.data.code == 1) {
							//开启200元控制
							this.boxData = res.data.data.filter(
								(obj) => obj.box_info !== null && obj.price < 200
							);
							console.log(this.boxData, "this.boxData");
							var data = res.data.data;
							this.boxPrice = this.boxData[0].box_info.price;
							this.boxName = this.boxData[0].box_info.title;
							this.maxYou = this.boxData[0].box_info.label;
							//#ifdef MP-WEIXIN
							this.loadPrizeList();
							//#endif
							// 数据不够5自动添加
							if (this.boxData.length < 5) {
								for (var i = 0; i < 5; i++) {
									if (this.boxData.length >= 5) {
										return;
									}
									this.boxData = this.boxData.concat(data);
								}
							}
						}
					})
					.catch((err) => {});
			},
			choujiang() {
				const currentMhInfo = this.boxData[this.swiperCurrent];
				// 5新人活动 6买1送1 7免单白嫖 8 一周限定限定
				// let id = params.id;
				const {
					source
				} = currentMhInfo;
				let id = currentMhInfo.box_id;
				if (source === 8) {
					/* 今日限定活动需要zid */
					let zid = currentMhInfo.zid; // 限定用
					uni.navigateTo({
						url: "/pages/home/kaixiang?id=" +
							id +
							"&music=" +
							this.muteBgMusic +
							"&boxSource=" +
							source +
							"&zid=" +
							zid,
					});
					return false;
				}
				if (source) {
					uni.navigateTo({
						url: "/pages/home/kaixiang?id=" +
							id +
							"&music=" +
							this.muteBgMusic +
							"&boxSource=" +
							source,
					});
				} else {
					uni.navigateTo({
						url: "/pages/home/kaixiang?id=" + id + "&music=" + this.muteBgMusic,
					});
				}
				console.log(currentMhInfo, "currentMhInfo");
				// this.youhuiNum = 0;
				// this.currentCoupon = '';
				// this.luckshow = true;
				// this.isShiwan = false;
				// this.getNotUsed();
			},
			shiwan() {
				const currentMhInfo = this.boxData[this.swiperCurrent];
				let id = currentMhInfo.box_id;
				let title = currentMhInfo.box_info.title;
				uni.navigateTo({
					url: "/pages/home/luckbox",
				});
				setTimeout(() => {
					uni.$emit("cdata", {
						id: id,
						num: 1,
						btnTitle: title,
					});
				}, 300);
			},
			chou(fangan) {
				this.buy_fangan = fangan;
				this.num = fangan.number;
				if (this.isShiwan == false) {
					this.getXing();
					this.orderShow = true;
				} else {
					uni.navigateTo({
						url: "/pages/home/luckbox",
					});
					setTimeout(() => {
						uni.$emit("cdata", {
							id: this.boxData[this.swiperCurrent].id,
							num: fangan.number,
						});
					}, 600);
				}
				this.luckshow = false;
			},
			playMusic() {
				this.muteBgMusic = !this.muteBgMusic;
				uni.setStorageSync("muteBgMusic", this.muteBgMusic);
			},

			// 选择支付方式
			selectPay(mode) {
				this.paymode = mode;
				this.get_box_price();
			},
			//获取支付价格
			get_box_price() {
				this.$http({
						url: "api/pay/get_box_price",
						data: {
							boxid: this.boxData[this.swiperCurrent].id,
							num: this.num,
							paymode: this.paymode,
							currentCoupon_id: this.currentCoupon.id,
						},
					})
					.then((res) => {
						if (res.data.code == 1) {
							this.pay_price = res.data.data.price;
							this.offer_remarks = res.data.data.offer_remarks;
						} else {
							this.$tip.tip(this.$t("获取价格失败，请关闭重试"));
						}
					})
					.catch((err) => {});
			},
			// 页面改变
			changeIdx(idx) {
				this.swiperCurrent = idx.detail.current;
				this.boxPrice = this.boxData[this.swiperCurrent].box_info.price;
				this.boxName = this.boxData[this.swiperCurrent].box_info.title;
				this.maxYou = this.boxData[this.swiperCurrent].box_info.label;
				this.flyingKey++;
				// this.prizeList = []
				// this.flyLeftList = [],
				// this.flyCenterList = [],
				// this.flyRightList = [],
				// clearInterval(this.interval)
				// this.loadPrizeList()
			},
			prev() {
				this.swiperCurrent--;
				if (this.swiperCurrent < 0) {
					this.swiperCurrent = this.boxData.length - 1;
				}
			},
			next() {
				this.swiperCurrent++;
				if (this.swiperCurrent >= this.boxData.length) {
					this.swiperCurrent = 0;
				}
			},
			selectCard(id) {
				this.swiperCurrent = id;
			},
			rulechange(index) {
				console.log(index);
			},
		},

		watch: {
			muteBgMusic(newValue, oldValue) {
				if (newValue) {
					// 开启静音
					this.$music.playBgm({
						mute: true,
					});
				} else {
					// 关闭 静音
					this.$music.playBgm({
						mute: false,
					});
				}
			},
		},
	};
</script>

<style>
	@import url("../../static/css/home.css");
</style>
<style lang="scss">
	.tongShowView {
		color: #fff;
		width: 500rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		box-sizing: border-box;

		&-0 {
			font-size: 28rpx;
			color: #f5ebc3;
		}

		&-1 {
			padding: 40rpx 0rpx 10rpx;
		}

		&-2 {
			// padding: 50rpx 20rpx;
			margin: 0 auto;
			border: none;
			// background-color: rgb(151, 95, 255);
			// box-shadow: 0px 200rpx 200rpx rgb(210, 187, 253) inset, 0rpx 5rpx 200rpx rgba(5, 5, 5, 0.212),
			//   0rpx -200rpx 200rpx rgb(124, 54, 255) inset;
			// border-radius: 10rpx;
			height: 760rpx;
			width: 460rpx;
			background-image: url("https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01eAzQzP2JfEvqLEFqz_!!2215984279448.png");
			background-size: 100% 100%;
			overflow: hidden;
			position: relative;

			.tongShowView-2-img {
				position: absolute;
				left: 50%;
				margin-left: -120rpx;
				top: 300rpx;
				width: 240rpx;
				height: 240rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.tongShowView-2-text {
				position: absolute;
				bottom: 70rpx;
				left: 50%;
				margin-left: -170rpx;
				width: 340rpx;
				font-size: 26rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin-top: 16rpx;
			}
		}

		&-3 {
			width: 420rpx;
			height: 120rpx;
			background-image: url("https://img.alicdn.com/imgextra/i4/2215984279448/O1CN016z7lVj2JfEvuRzFje_!!2215984279448.png");
			background-size: 100% 100%;
			// background-color: #8342ff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34rpx;
			color: #fff;
			margin-top: 30rpx;
			margin-left: 30rpx;
		}
	}

	.prize-flying {
		z-index: 99;
		width: 200rpx;
		position: absolute;
		bottom: 50%;
		left: 50%;
		transform: translateX(-50%);

		.fly-prize {
			text-align: center;
			position: absolute;
			top: 100%;
			opacity: 0;
			width: 78rpx;
			height: 58rpx;
			background-image: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/dingdangpaopao.png") !important;
			background-repeat: no-repeat !important;
			background-size: 100% 100% !important;
			border-radius: 50%;
			background: #fff;
			// border: 1px solid #3277ff;
			padding: 14rpx;
			text-align: center;

			image {
				margin-top: 15%;
				width: 70%;
				height: 70%;
			}
		}

		.fly-left {
			left: 0px;
			z-index: 5;
			-webkit-animation: flyleft;
			animation: flyleft;
		}

		.fly-center {
			left: 60rpx;
			z-index: 3;
			-webkit-animation: flycenter;
			animation: flycenter;
		}

		.fly-right {
			right: 0px;
			z-index: 5;
			-webkit-animation: flyright;
			animation: flyright;
		}
	}

	// 动画
	@keyframes flyleft {
		0% {
			// top: 100%;
			-webkit-transform: scale(0) translateX(0);
			transform: scale(0) translateX(0);
			opacity: 0.6;
		}

		3% {
			// top: 95%;
		}

		5% {
			-webkit-transform: scale(1) translateX(0) translateY(-80%);
			transform: scale(1) translateX(0) translateY(-80%);
			opacity: 0.8;
		}

		20% {
			opacity: 1;
		}

		30% {
			opacity: 0.2;
		}

		32% {
			opacity: 0;
			visibility: hidden;
		}

		50% {
			-webkit-transform: scale(1.9) translateX(-40px) translateY(-340%);
			transform: scale(1.9) translateX(-40px) translateY(-340%);
		}

		100% {
			// top: 0%;
			-webkit-transform: translateX(-100px);
			transform: translateX(-100px);
		}
	}

	@keyframes flycenter {
		0% {
			// top: 100%;
			-webkit-transform: scale(0) translateX(0);
			transform: scale(0) translateX(0);
			opacity: 0.6;
		}

		3% {
			// top: 95%;
		}

		5% {
			-webkit-transform: scale(1) translateX(0) translateY(-80%);
			transform: scale(1) translateX(0) translateY(-80%);
			opacity: 0.8;
		}

		20% {
			opacity: 1;
		}

		30% {
			opacity: 0.2;
		}

		32% {
			opacity: 0;
			visibility: hidden;
		}

		34% {
			opacity: 0;
		}

		50% {
			-webkit-transform: scale(1.9) translateX(0) translateY(-340%);
			transform: scale(1.9) translateX(0) translateY(-340%);
		}

		100% {
			// top: 0%;
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	}

	@keyframes flyright {
		0% {
			// top: 100%;
			-webkit-transform: scale(0) translateX(0);
			transform: scale(0) translateX(0);
			opacity: 0.6;
		}

		3% {
			// top: 95%;
		}

		5% {
			-webkit-transform: scale(1) translateX(0) translateY(-80%);
			transform: scale(1) translateX(0) translateY(-80%);
			opacity: 0.8;
		}

		20% {
			opacity: 1;
		}

		30% {
			opacity: 0.2;
		}

		32% {
			opacity: 0;
			visibility: hidden;
		}

		34% {
			opacity: 0;
		}

		50% {
			-webkit-transform: scale(1.9) translateX(40px) translateY(-340%);
			transform: scale(1.9) translateX(40px) translateY(-340%);
		}

		100% {
			// top: 0%;
			-webkit-transform: translateX(100px);
			transform: translateX(100px);
		}
	}

	.scroll-rule-Y {
		height: 200rpx;
		width: 690rpx;
		margin: 0 auto;
	}

	.boxname {
		width: 100rpx;
		overflow: hidden;
	}

	.newPeopleBox,
	.box11 {
		.newmainBox {
			background: url("../../static/image/enimg/newpeople.png") no-repeat;
			width: 750rpx;
			height: 784rpx;
			background-size: 100%;
			padding-top: 200rpx;
		}

		.youhuilist {
			width: 550rpx;
			height: 566rpx;
			margin: 0 auto;
		}

		.newmainBox .youhuibox {
			background: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/youhui.png") no-repeat;
			background-size: 550rpx 157rpx;
			width: 550rpx;
			height: 157rpx;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
		}

		.newmainBox .youhuibox .left {
			display: flex;
			align-items: center;
			color: #255470;
			padding-left: 20rpx;
		}

		.newmainBox .youhuibox .left .name {
			font-size: 34rpx;
			margin-bottom: 10rpx;
			color: #255470;
		}

		.newmainBox .youhuibox .left .price1 {
			color: #255470;
			font-size: 28rpx;
		}

		.newmainBox .youhuibox .left .price1 .pri {
			font-weight: 700;
			font-size: 36rpx;
			color: #255470;
			vertical-align: -6%;
			margin-right: 8rpx;
		}

		.newmainBox .youhuibox .right {
			width: 160rpx;
			height: 156rpx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.newmainBox .youhuibox .right .ling {
			border-radius: 50rpx;
			width: 120rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 45rpx;
		}

		.newmainBox .youhuibox .right .active {
			background-color: #60e0e1;
			color: #fff;
		}

		.newmainBox .youhuibox .right .yiling {
			background-color: #9d9d9d;
			color: #fff;
		}

		.newmainBox .youhuibox .right .price {
			font-size: 28rpx;
			color: #fff;
			margin-bottom: 10rpx;
			font-weight: 700;
		}

		.newmainBox .youhuibox .right .price text {
			font-size: 46rpx;
			color: #fff;
		}

		.btm-2 {
			width: 750rpx;
			position: relative;
			top: -60rpx;
		}

		.btm-2 .btmBg {
			width: 750rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.btm-2 .btn1 {
			width: 750rpx;
			position: absolute;
			top: 80rpx;
			left: 0;
			text-align: center;
		}

		.btm-2 .btn1 image {
			width: 350rpx;
			display: inline-block;
		}

		.off {
			text-align: center;
			margin-top: 180rpx;
		}

		.off {
			text-align: center;
			margin-top: 80rpx;
		}

		.off image,
		.off image,
		.tanBox .off image {
			width: 70rpx;
			height: 70rpx;
			display: inline-block;
		}

		.daojubox {
			background: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/qo.png") no-repeat;
			background-size: 100%;
			width: 650rpx;
			height: 980rpx;
			padding: 30rpx;
			padding-top: 60rpx;
			box-sizing: border-box;
		}

		.daojubox .top {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.daojubox .top image {
			width: 350rpx;
		}

		.daojubox .rulebox {
			color: #164367;
		}

		.daojubox .rulebox .wen {
			border-radius: 50%;
			color: #164367;
			border: 4rpx solid #164367;
			width: 40rpx;
			height: 40rpx;
			line-height: 36rpx;
			text-align: center;
			font-weight: bold;
			display: inline-block;
			margin-right: 10rpx;
		}

		.nodata {
			height: 680rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.nodata image {
			width: 340rpx;
			height: 340rpx;
		}

		.nodata .tit {
			font-size: 34rpx;
			margin: 20rpx 0;
		}

		.nodata .fun {
			font-size: 28rpx;
			color: #999;
		}

		.cardList .list {
			background-color: #fff;
			margin-bottom: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			width: 100%;
		}

		.cardList .list .goods .picbox {
			background-color: #f1f2f6;
			width: 150rpx;
			height: 150rpx;
			padding: 20rpx;
			box-sizing: border-box;
			flex-shrink: 0;
		}

		.cardList .list .goods .picbox image {
			width: 100%;
			height: 100%;
		}

		.cardList .textbox {
			margin-left: 20rpx;
			width: 100%;
		}

		.cardList .textbox .tit {
			font-size: 32rpx;
		}

		.cardList .textbox .two {
			font-size: 28rpx;
			margin-top: 10rpx;
		}

		.cardList .textbox .qi {
			color: #999;
			font-size: 24rpx;
			margin-top: 10rpx;
		}

		.cardList .list .tip1 {
			color: #999;
			font-size: 24rpx;
			margin-top: 10rpx;
			line-height: 1.3;
		}

		.explain .tit {
			background-image: linear-gradient(#afc5f3, #94a0e4);
			font-size: 32rpx;
			display: inline-block;
			font-weight: bold;
			padding: 6rpx 15rpx;
			color: #333;
			margin-top: 15rpx;
		}

		.explain .tit text {
			margin: 0 10rpx;
		}

		.explain .btm {
			/* background-color: #fff; */
			text-align: center;
			padding-top: 30rpx;
		}

		.explain .btm .btn2 {
			display: inline-block;
			background-color: #a5b0e1;
			padding: 25rpx 80rpx;
		}

		.explain .text {
			color: #999;
			font-size: 24rpx;
		}

		.vbox {
			background-color: #fff;
			width: 650rpx;
			padding: 10rpx;
			box-sizing: border-box;
		}

		.vbox .btm {
			padding: 20rpx 0;
		}

		.vbox .btm button {
			background-color: #2ceaff;
			width: 50%;
		}

		.orderbox {
			background-color: #fff;
			z-index: 999;
		}

		.orderbox .tit {
			text-align: center;
			padding: 30rpx 0;
			font-size: 32rpx;
		}

		.orderbox .con {
			background-color: #f3f4f8;
			padding: 20rpx;
			box-sizing: border-box;
			min-height: 800rpx;
		}

		.orderbox .con .box1 {
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
		}

		.orderbox .goods image {
			width: 150rpx;
			height: 150rpx;
			flex-shrink: 0;
		}

		.orderbox .goods .info {
			padding-top: 10rpx;
			width: 90%;
			margin-left: 30rpx;
		}

		.orderbox .goods .info .t {
			font-size: 34rpx;
		}

		.orderbox .goods .info .two {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
		}

		.orderbox .goods .info .two .price {
			font-size: 30rpx;
			font-weight: bold;
		}

		.orderbox .goods .info .two .num {
			color: #999;
		}

		.orderbox .rowitem {
			padding: 20rpx 0;
		}

		.orderbox .rowitem image {
			width: 45rpx;
			height: 45rpx;
			margin-right: 10rpx;
		}

		.orderbox .rowitem .l {
			display: flex;
			align-items: center;
		}

		.orderbox .total {
			border-top: 1rpx solid #e5e5e5;
			text-align: right;
			font-weight: bold;
			padding: 30rpx 0 10rpx;
		}

		.orderbox .total text {
			color: #d81e06;
			font-size: 32rpx;
		}

		.orderbox .payrow {
			/* width: 670rpx; */
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.orderbox .obtm {
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
		}

		.orderbox .obtm button {
			background-color: #70dde0;
		}

		.orderbox .obtm button text {
			font-weight: bold;
		}

		.orderbox .xieyi {
			width: 690rpx;
			margin: 0 auto;
			padding: 10rpx 0;
			padding-bottom: calc(constant(safe-area-inset-bottom));
			padding-bottom: calc(env(safe-area-inset-bottom));
		}

		.syouhui {
			background-color: #fff;
		}

		.youtit {
			padding: 20rpx 0;
			display: flex;
			position: relative;
		}

		.youtit .back {
			padding: 0 20rpx;
			position: absolute;
		}

		.youtit .youhuit {
			font-size: 34rpx;
			text-align: center;
			width: 100%;
		}

		.youhuicon {
			background-color: #f4f8fb;
			/* min-height: 900rpx; */
			padding: 20rpx;
			box-sizing: border-box;
		}

		.youhuicon .shitu {
			height: 670rpx;
		}

		.youhuicon .shitu .couList {
			display: flex;
			height: 160rpx;
			border-radius: 6rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
		}

		.youhuicon .shitu .couList .l {
			flex-shrink: 0;
			width: 160rpx;
			height: 160rpx;
			background-color: #63d7d6;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.youhuicon .shitu .couList .l .aa {
			font-size: 30rpx;
			color: #fff;
		}

		.youhuicon .shitu .couList .l .pri {
			font-size: 46rpx;
			color: #fff;
		}

		.youhuicon .shitu .couList .l .tiao {
			color: #fff;
			text-align: center;
			font-size: 24rpx;
		}

		.youhuicon .shitu .couList .r {
			background-color: #fff;
			width: 100%;
			padding: 20rpx;
			height: 160rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.youhuicon .shitu .couList .r .ll .t {
			font-size: 32rpx;
		}

		.youhuicon .shitu .couList .r .use {
			margin: 8rpx 0;
		}

		.youhuicon .shitu .couList .r .qi {
			font-size: 24rpx;
			color: #999;
		}

		.youhuicon .btn {
			width: 100%;
			text-align: center;
			color: #fff;
			line-height: 80rpx;
			background-color: #63d7d6;
			font-size: 32rpx;
			margin-top: 20rpx;
			border-radius: 6rpx;
		}

		.luckbox {
			background: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/luckbg.png") no-repeat;
			background-size: 100%;
			border-radius: 24rpx;
			box-sizing: border-box;
			padding: 30rpx;
			width: 650rpx;
			background-color: #fff;
		}

		.luckbox .top {
			justify-content: space-between;
			display: flex;
			align-items: center;
		}

		.luckbox .titpic {
			width: 50%;
		}

		.luckbox .goodsPic {
			width: 45%;
			position: relative;
			/* top: -80rpx; */
		}

		.luckbox .option {
			padding: 20rpx 0;
		}

		.luckbox .option .row {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}

		.luckbox .option .row .chou {
			background: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/rx.webp") no-repeat;
			background-size: 100%;
			width: 50%;
			display: flex;
			align-items: center;
			text-align: center;
			height: 124rpx;
			margin: 15rpx 0;
			position: relative;
		}

		.jian {
			position: absolute;
			background-color: #ffeae5;
			font-size: 22rpx;
			color: #e54e20;
			padding: 2rpx 20rpx;
			border: 1rpx solid #e6a793;
			border-top-right-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
			top: -20rpx;
			left: 10rpx;
		}

		.yuanj {
			font-size: 24rpx;
			color: #077c8b;
			text-decoration: line-through;
			margin-left: 5rpx;
		}

		.luckbox .option .row .chou .b {
			width: 100%;
		}

		.luckbox .option .row .chou .tit {
			font-size: 32rpx;
			margin-bottom: 6rpx;
		}

		.luckbox .option .shi {
			background: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/rw.webp");
			height: 124rpx;
			text-align: center;
			background-size: 100% 124rpx;
			display: flex;
			align-items: center;
			margin-top: 15rpx;
			position: relative;
		}

		.luckbox .option .shi .b {
			width: 100%;
		}

		.ouhuang {
			background: #fff;
			background-size: 100%;
		}

		.ouhuang .scroll {
			height: 920rpx;
			margin-top: 80rpx;
		}

		.ouhuang .scroll .listbox {
			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.ouhuang .scroll .listbox .list {
			margin-bottom: 20rpx;
		}

		.ouhuang .scroll .listbox .picbox {
			position: relative;
		}

		.ouhuang .scroll .listbox .picbox image {
			width: 100%;
			height: 350rpx;
		}

		.ouhuang .scroll .listbox .picbox .text {
			padding: 0 20rpx;
			line-height: 80rpx;
			background-color: rgba(255, 255, 255, 0.8);
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
		}

		.tong {
			position: fixed;
			left: 0;
			top: 220rpx;
			width: 750rpx;
			background-size: 100% 100% !important;
			height: 80rpx;
			background-repeat: no-repeat !important;
			/* #ifdef H5 */
			top: 150rpx;
			/* #endif */
		}

		.tong .text {
			/* width: 550rpx; */
			padding: 0 30rpx;
			padding-right: 120rpx;
			box-sizing: border-box;
		}

		.tong image {
			position: absolute;
			width: 100rpx;
			right: 50rpx;
			top: -40rpx;
		}

		.tanBox {
			width: 500rpx;
			text-align: center;
		}

		.tanBox .pic image {
			width: 100%;
		}
	}

	.newPeopleBox_1 {
		.newmainBox {
			background: url("https://img.alicdn.com/imgextra/i2/2215984279448/O1CN01MVlCRG2JfEvqKuuUZ_!!2215984279448.png") no-repeat;
			width: 750rpx;
			height: 784rpx;
			background-size: 100%;
			padding-top: 200rpx;
		}
	}

	.dot-view {
		position: relative;

		.dot-red {
			background-color: #fa3534;
			display: inline-block;
			height: 36rpx;
			width: 36rpx;
			line-height: 36rpx;
			border-radius: 18rpx;
			// overflow: hidden;
			text-align: center;
			color: #fff;
			font-size: 22rpx;
			position: absolute;
			top: -4rpx;
			right: -4rpx;
		}
	}

	.video-box-zo {
		width: 620rpx;
		height: 560rpx;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx;
		box-sizing: border-box;
		overflow: hidden;

		.vbox-video {
			width: 600rpx;
			height: 450rpx;
			overflow: hidden;
			background-color: red;

			video {
				width: 100%;
				height: 100%;
			}
		}

		.video-box-btm {
			width: 300rpx;
			text-align: center;
			color: #fff;
			line-height: 80rpx;
			background-color: #63d7d6;
			font-size: 32rpx;
			margin-top: 20rpx;
			border-radius: 6rpx;
		}
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.8s;
	}

	.fade-enter,
	.fade-leave-to

	/* .fade-leave-active below version 2.1.8 */
		{
		opacity: 0;
	}

	.tong-view {
		height: 80rpx;
		line-height: 80rpx;
		position: fixed;
		top: 200rpx;
		width: 750rpx;
		text-align: center;
		z-index: 99999999;
		// background-image: url("https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01KeUqPk2JfEvwQ6LPW_!!2215984279448.png");
		background-size: 100% 100%;

		.tong-view-text {
			width: 80%;
			color: #fff;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin: 0 auto;
		}

		.tong-gd-img {
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			top: -10rpx;
			right: 10rpx;
		}

		.text-gd-img {
			height: 60rpx;
			position: absolute;
			top: 26rpx;
			right: 30rpx;
			z-index: 999999999;
			transform: rotate(-8deg);
			font-family: YouSheBiaTiHei;
			color: #a191f3;
			font-size: 50rpx;
			text-shadow: 0.25rem 0.125rem 0.375rem #fff;
			/* #ifdef MP-WEIXIN */
			font-weight: bold;
			text-shadow: 0.375rem 0.125rem 0.375rem #fff;

			/* #endif */
			image {
				width: 55rpx;
				height: 35rpx;
			}

			// mix-blend-mode: multiply;
		}
	}

	.tong-view-ssbg {
		background-image: url("http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240110/6236505eb250653e2d5022ecbbcccec6.png");
	}

	.tong-view-csbg {
		background-image: url("http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240110/3e03b47dd44c18741359433429398637.png");
	}

	.mask {
		// background-color: #000;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99999999999;

		.block {
			// padding: 0 30rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 620rpx;
			background-color: #fff;
			height: 580rpx;

			.block_video {
				width: 100%;
				width: 100%;
			}

			.video-box-btm {
				width: 300rpx;
				text-align: center;
				color: #fff;
				line-height: 80rpx;
				background-color: #63d7d6;
				font-size: 32rpx;
				margin-top: 20rpx;
				border-radius: 6rpx;
				position: relative;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}

		._root {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			left: 40rpx;
			top: 5vh;
		}

		.qweqwe {
			background-color: #fff;
			height: 150rpx;
			width: 100%;
			color: #000;
			margin-top: 25%;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}

	.c-btn {
		width: 400rpx;
		border-radius: 15rpx;
		// background-color: #035678;
		font-family: myfont;
		text-align: center;
		font-size: 60rpx;
		color: #fff;
		position: relative;
		height: 130rpx;
	}
	.biankuang {
		position: absolute;
		left: 16rpx;
		top: 15rpx;
		width: 390rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 0;
		/* transform: perspective(200rpx); */
		overflow: hidden;
		/* box-shadow: 0 0 10rpx #2ceaff; */
		border: 1rpx solid rgb(200, 47, 255);
		background-color: rgb(200, 47, 255);
		z-index: 1;
	}
	
	.biankuang>text {
		position: absolute;
	}
	
	.biankuang>text:nth-child(1) {
		width: 100%;
		height: 3px;
		background: -webkit-linear-gradient(left, transparent, #affeff);
		left: -100%;
		top: 0px;
		animation: line1 2s linear infinite;
	}
	@keyframes line1 {
	
		50%,
		100% {
			left: 100%;
		}
	}
	
	.biankuang>text:nth-child(2) {
		width: 3px;
		height: 100%;
		background: -webkit-linear-gradient(top, transparent, #affeff);
		right: 0px;
		top: -100%;
		animation: line2 2s 0.25s linear infinite;
	}
	
	@keyframes line2 {
	
		50%,
		100% {
			top: 100%;
		}
	}
	
	.biankuang>text:nth-child(3) {
		width: 100%;
		height: 3px;
		background: -webkit-linear-gradient(left, #affeff, transparent);
		left: 100%;
		bottom: 0px;
		animation: line3 2s 0.75s linear infinite;
	}
	
	@keyframes line3 {
	
		50%,
		100% {
			left: -100%;
		}
	}
	
	.biankuang>text:nth-child(4) {
		width: 3px;
		height: 100%;
		background: -webkit-linear-gradient(top, transparent, #affeff);
		left: 0px;
		top: 100%;
		animation: line4 2s 1s linear infinite;
	}
	
	@keyframes line4 {
	
		50%,
		100% {
			top: -100%;
		}
	}
	
	@keyframes guang {
	
		50%,
		100% {
			transform: translateX(150rpx) skewX(30deg);
		}
	}
	
	.biankuang:after {
		content: '';
		position: absolute;
		width: 80rpx;
		height: 100%;
		z-index: 1;
		background-color: rgba(112, 203, 254, 0.5);
		transform: translateX(-450rpx) skewX(30deg);
		transition: 0.75s ease-in-out;
		overflow: hidden;
		animation: guang 2.5s 1s linear infinite;
		box-shadow: 0 0 10rpx rgb(200, 47, 255);;
	}
</style>